<template>
  <div>
    <el-form ref="form" inline :model="form" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="姓名:" prop="userName">
            <el-input  v-model="form.userName" placeholder="请输入姓名" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员编号:" prop="id">
            <el-input  v-model="form.id" placeholder="请输入人员编号" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资格号码:" prop="qualificationId">
            <el-input  v-model="form.qualificationId" placeholder="请输入资格号码" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专兼职:" prop="isFullTime">
            <el-select style="width:100%;" v-model="form.isFullTime">
              <el-option
                v-for="item in isFullTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="资格:" prop="qualification">
            <el-select style="width:100%;" v-model="form.qualification">
              <el-option
                v-for="item in qualificationList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="体系:" prop="system">
            <el-select style="width:100%;" v-model="form.system">
              <el-option
                v-for="item in systemList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态:" prop="status">
            <el-select style="width:100%;" v-model="form.status">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="getBusiness">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger"  icon="el-icon-delete" size="small" @click="handleReset" >清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs class="table-tabs" type="border-card">
      <el-tab-pane>
        <span slot="label">业务代码登记 {{ tableData.length }}</span>
        <el-table border :data="tableData" style="width: 100%" max-height="400">
          <el-table-column prop="status" label="状态" align="center" >
            <template slot-scope="scope">
              <div>{{ getColLabel(statusList, scope.row.status) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="姓名" align="center" />
          <el-table-column prop="id" label="编号" align="center" />
          <el-table-column prop="branchOffice" label="分公司" align="center" />
          <el-table-column prop="isFullTime" label="专兼职" align="center">
            <template slot-scope="scope">
              <div>{{ getColLabel(isFullTimeList, scope.row.isFullTime) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="system" label="体系" align="center">
            <template slot-scope="scope">
              <div>{{ getColLabel(systemList, scope.row.system) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="qualification" label="资格" align="center">
            <template slot-scope="scope">
              <div>{{ getColLabel(qualificationList, scope.row.qualification) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="qualificationId" label="资格证编号" align="center" />
          <el-table-column prop="startTime" label="开始时间" align="center" />
          <el-table-column prop="endTime" label="结束时间" align="center" />
          <el-table-column prop="remark" label="备注" align="center" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click.native.prevent="toDetail(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          @current-change="handleChangeCurrent"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getBusinessList } from "../../api/business";
import moment from "moment";
export default {
  name: "HrBusiness",
  data() {
    return {
      form: {
        userName: "",
        id: "",
        qualificationId: "",
        isFullTime: "",
        qualification: "",
        system: "",
        status: "",
      },
      tableData: [{
        status: '在职',
        userName: '周星驰',
        id: '1',
        branchOffice: '纽约分公司',
        isFullTime: "兼职",
        system: 'EMS',
        qualification: '审核员',
        qualificationId: '22333',
        startTime: '2024-01-18',
        endTime: '2027-01-12',
        remark: ''
      }],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      statusList: [{
        value: '1',
        label: '在职'
      },{
        value: '2',
        label: '离职'
      },{
        value: '3',
        label: '停用'
      }],
      isFullTimeList: [{
        value: '1',
        label: '专职'
      },{
        value: '2',
        label: '兼职'
      },{
        value: '3',
        label: '无'
      }],
      qualificationList: [{
        value: '1',
        label: '高级审核员'
      },{
        value: '2',
        label: '审核员'
      },{
        value: '3',
        label: '实习审核员'
      },{
        value: '4',
        label: '技术专家'
      },{
        value: '5',
        label: '高级审查员'
      },{
        value: '6',
        label: '审查员'
      },{
        value: '7',
        label: '主任审查员'
      },{
        value: '8',
        label: '其他'
      }],
      systemList: [{
        value: '1',
        label: 'QMS'
      },{
        value: '2',
        label: 'EMS'
      },{
        value: '3',
        label: 'OHSMS'
      },{
        value: '4',
        label: 'EC9000'
      },{
        value: '5',
        label: '自愿性产品'
      },{
        value: '6',
        label: 'FSMS'
      },{
        value: '7',
        label: 'HACCP'
      },{
        value: '8',
        label: 'HACCP-S'
      },{
        value: '9',
        label: '有机'
      },{
        value: '10',
        label: 'GAP'
      },{
        value: '11',
        label: '其他'
      },{
        value: '12',
        label: 'ECPSC'
      },{
        value: '13',
        label: '其他服务认证'
      }]
    };
  },
  created() {
    this.getBusiness();
  },
  methods: {
    async getBusiness() {
      const { current, pageSize } = this.pageInfo;
      const res = await getBusinessList({ ...this.form, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map((x) => {
        return {
          ...x,
          time: moment(x.time).format("YYYY-MM-DD HH:mm"),
        };
      });
      this.pageInfo = pageInfo;
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      this.getBusiness();
    },
    handleReset() {
      this.$refs["form"].resetFields();
      this.getBusiness();
    },
    toDetail() {

    },
    getColLabel(list, data) {
      let res = list.filter((item) => {
        return item.value === data;
      });
      return res[0]?.label || '--';
    }
  },
};
</script>
